{% extends "CmsBundle::base.html.twig" %}

{% block pluginStyles %}
    <link rel="stylesheet" href="/assets/cms/css/colorbox.min.css" />
{% endblock %}

{% block pageContent %}
    <!-- PAGE CONTENT BEGINS -->
    <div>
        {% for day, image in img %}
            <h3>{{ day }}</h3>
            <ul class="ace-thumbnails clearfix">
                {% for item in image %}
                    <li id="{{ item.id }}">
                        <a href="{{ item.url['0'] }}" title="{{ item.name }}" data-rel="colorbox">
                            <img width="150" height="150" alt="150x150" src="{{ item.url['1'] }}" />
                        </a>

                        <div class="tags">
                            <span class="label-holder">
                                <span class="label label-info">breakfast</span>
                            </span>

                            <span class="label-holder">
                                <span class="label label-success">toast</span>
                            </span>
                        </div>

                        <div class="tools">
                            <!--
                            <a href="#">
                                <i class="ace-icon fa fa-link"></i>
                            </a>

                            <a href="#">
                                <i class="ace-icon fa fa-paperclip"></i>
                            </a>
                            -->
                            <a class="undo" value="{{ item.id }}">
                                <i class="ace-icon fa fa-undo"></i>
                            </a>

                            <a class="delete" value="{{ item.id }}">
                                <i class="ace-icon fa fa-times red"></i>
                            </a>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        {% endfor %}

    </div><!-- PAGE CONTENT ENDS -->
{% endblock %}

{% block pluginScripts %}
    <script src="/assets/cms/js/jquery.colorbox.min.js"></script>
{% endblock %}

{% block inlineScripts %}
    <!-- inline scripts related to this page -->
    <script type="text/javascript">
        jQuery(function($) {
            var $overflow = '';
            var colorbox_params = {
                rel: 'colorbox',
                reposition:true,
                scalePhotos:true,
                scrolling:false,
                previous:'<i class="ace-icon fa fa-arrow-left"></i>',
                next:'<i class="ace-icon fa fa-arrow-right"></i>',
                close:'&times;',
                current:'{current} of {total}',
                maxWidth:'100%',
                maxHeight:'100%',
                onOpen:function(){
                    $overflow = document.body.style.overflow;
                    document.body.style.overflow = 'hidden';
                },
                onClosed:function(){
                    document.body.style.overflow = $overflow;
                },
                onComplete:function(){
                    $.colorbox.resize();
                }
            };

            $('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
            $("#cboxLoadingGraphic").html("<i class='ace-icon fa fa-spinner orange fa-spin'></i>");//let's add a custom loading icon


            $(document).one('ajaxloadstart.page', function(e) {
                $('#colorbox, #cboxOverlay').remove();
            });

            $(".delete").on('click', function() {
                var id = $(this).attr("value");
                $.ajax({
                    url : "{{ path("yearnfar_cms_image_delete2") }}" + "?id=" + id,
                    success : function(ret) {
                        var data = JSON.parse(ret);
                        if (data.errno==0) {
                            $("#"+id).hide();
                        } else if (data.errmsg!='') {
                            alert($data.errmsg);
                        }
                        return ;
                    }
                });
            })

            $(".undo").on('click', function() {
                var id = $(this).attr("value");
                $.ajax({
                    url : "{{ path("yearnfar_cms_image_undo") }}" + "?id=" + id,
                    success : function(ret) {
                        var data = JSON.parse(ret);
                        if (data.errno==0) {
                            $("#"+id).hide();
                        } else if (data.errmsg!='') {
                            alert($data.errmsg);
                        }
                        return ;
                    }
                });
            })
        })
    </script>
{% endblock %}
